<template>
  <view>
    <view
      class="custom_bar"
      :class="{ 'navbar-fixed': isFixed, 'border-bottom': borderBottom }"
      :style="{ background: background, zIndex: zIndex, padding: getPadding }"
    >
      <view
        class="status-bar"
        :style="{ height: sysInfo.statusBarHeight + 'px' }"
      ></view>
      <view class="custom_bar_header" :style="[headerStyle]">
        <slot name="header" v-if="customHeader"></slot>
        <block v-else>
          <view class="header_block" :style="[blockStyle]" @tap.stop="goBack">
            <image
              class="back_icon"
              v-if="regexpUtil.isImg(backIcon)"
              :src="backIcon"
              mode="scaleToFill"
            ></image>
          </view>
          <view class="header_title">
            <text class="title" :style="[titleStyle]">{{ title }}</text>
          </view>
          <view class="header_block" :style="[blockStyle]"></view>
        </block>
      </view>
      <view class="custom_bar_body">
        <slot name="body"></slot>
      </view>
    </view>
    <view
      v-if="isFixed"
      :style="{ width: '100%', height: fixedHeight + 'px' }"
    ></view>
  </view>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { RegexpUtil } from "@/utils";
@Component({})
export default class CustomBar extends Vue {
  public regexpUtil: any = new RegexpUtil();
  // 标题
  @Prop({ type: String, default: "首页" })
  readonly title!: string;
  // 返回图标
  @Prop({ type: String, default: "../../static/images/common/back_icon.png" })
  readonly backIcon!: string;

  @Prop({ type: String, default: "#ffffff" })
  readonly background!: string;

  @Prop({ type: Number, default: 50 })
  readonly headerHeight!: number;

  @Prop({ type: Number, default: 9999 })
  readonly zIndex!: number;

  @Prop({ type: Object, default: () =>{} })
  readonly titleStyle!: object;

  @Prop({ type: Boolean, default: false })
  readonly borderBottom!: boolean;

  @Prop({ type: Boolean, default: true })
  readonly isFixed!: boolean;

  @Prop({ type: Boolean, default: false })
  readonly customHeader!: boolean;

  @Prop({ type: Boolean, default: false })
  readonly customBack!: boolean;
  public slotHeight: number | string = 0;
  public sysInfo: any = uni.getSystemInfoSync();
  // #ifndef APP-PLUS || H5 || MP-LARK
  public menuButtonInfo: any = uni.getMenuButtonBoundingClientRect();
  // #endif

  constructor() {
    super();
    if (this.menuButtonInfo) {
      this.slotHeight = this.menuButtonInfo.height + this.menuButtonInfo.top
    } else {
      this.slotHeight = this.headerHeight
    }
  }

  get getPadding():string {
    // #ifndef APP-PLUS || H5
    return '0';
    // #endif
    // #ifdef APP-PLUS || H5
    if (this.customHeader) {
      return '20rpx 0';
    } else {
      return '0'
    }
    // #endif
  }

  get headerStyle(): object {
    let style: any = { height: this.headerHeight + "px" };
    // #ifndef APP-PLUS || H5 || MP-LARK
    if (this.menuButtonInfo) {
      style.height = this.menuButtonInfo.height + "px";
      style.marginTop =
        this.menuButtonInfo.top - this.sysInfo.statusBarHeight + "px";
    }
    // #endif
    return style;
  }

  // 两边块的样式
  get blockStyle() {
    let style: any = {
      width: 101 + "px",
      padding: '0 6px',
    };
    // #ifndef APP-PLUS || H5 || MP-LARK
    if (this.menuButtonInfo) {
      // 获取胶囊右边距
      const menuRightWidth =
        this.sysInfo.windowWidth - this.menuButtonInfo.right;
      style.padding = `0 ${menuRightWidth}px`;
      // 系统宽度减去胶囊左边界加右边界
      style.width = menuRightWidth * 2 + this.menuButtonInfo.width + "px";
    }
    // #endif
    return style;
  }

  // 头部总高度
  get fixedHeight() {
    return this.slotHeight;
  }

  created() {}
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query
      .select(".custom_bar")
      .boundingClientRect((data: any): void => {
        this.slotHeight = data.height;
      })
      .exec();
    this.$emit("height", this.fixedHeight);
  }

  // 返回
  goBack(): void {
    // 返回图标不存在
    if (!this.backIcon) return;
    // 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
    if (this.customBack) {
      this.$emit("back");
    } else {
      const pages = getCurrentPages(); // 当前页
      const beforePage = pages[pages.length - 2];
      if (!beforePage) {
        // 从外部链接进来统一返回首页
        uni.switchTab({
          url: "/pages/index/index",
        });
      } else {
        uni.navigateBack({ delta: 1 });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.border-bottom {
  border-bottom: 1rpx solid #ebeaea;
}
.custom_bar {
  width: 750rpx;
  height: auto;
  display: flex;
  flex-direction: column;
  .status-bar {
    width: 100%;
    height: auto;
  }
  .custom_bar_header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    .header_block {
      height: 100%;
      display: flex;
      align-items: center;
      .back_icon {
        width: 24rpx;
        height: 38rpx;
      }
    }
    .header_title {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 100%;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 36rpx;
        color: #333333;
        font-weight: normal;
      }
    }
  }
}
</style>